การตรวจจับเมช (Mesh Detection) ใน WebXR: ความเข้าใจสภาพแวดล้อมและการบดบัง (Occlusion)

WebXR กำลังปฏิวัติวิธีที่เราโต้ตอบกับเว็บโดยการเปิดใช้งานประสบการณ์ความเป็นจริงเสริม (AR) และความเป็นจริงเสมือน (VR) ที่สมจริงได้โดยตรงภายในเบราว์เซอร์ องค์ประกอบสำคัญในการสร้างแอปพลิเคชัน AR ที่สมจริงและน่าดึงดูดคือความสามารถในการทำความเข้าใจสภาพแวดล้อมของผู้ใช้ ซึ่งเป็นจุดที่การตรวจจับเมช (mesh detection) ความเข้าใจสภาพแวดล้อม และการบดบัง (occlusion) เข้ามามีบทบาท บทความนี้จะเจาะลึกแนวคิดเหล่านี้ โดยให้ภาพรวมที่ครอบคลุมเกี่ยวกับวิธีการทำงานและวิธีนำไปใช้ในโปรเจกต์ WebXR ของคุณ

การตรวจจับเมช (Mesh Detection) ใน WebXR คืออะไร?

การตรวจจับเมชคือกระบวนการใช้อุปกรณ์เซ็นเซอร์ของอุปกรณ์ (กล้อง, เซ็นเซอร์ความลึก ฯลฯ) เพื่อสร้างแบบจำลอง 3 มิติ หรือ "เมช" ของสภาพแวดล้อมโดยรอบของผู้ใช้ เมชนี้ประกอบด้วยชุดของจุดยอด (vertices), ขอบ (edges) และพื้นผิว (faces) ที่กำหนดรูปร่างและพื้นผิวในโลกแห่งความเป็นจริง ลองนึกภาพว่ามันเป็นฝาแฝดดิจิทัลของพื้นที่ทางกายภาพ ซึ่งช่วยให้แอปพลิเคชัน WebXR ของคุณ "มองเห็น" และโต้ตอบกับสภาพแวดล้อมได้อย่างสมจริง

เหตุใดการตรวจจับเมชจึงมีความสำคัญ?

• ปฏิสัมพันธ์ที่สมจริง: หากไม่มีการตรวจจับเมช วัตถุเสมือนจะลอยอยู่ในอากาศอย่างไร้จุดยึดเหนี่ยว การตรวจจับเมชช่วยให้วัตถุเสมือนสามารถโต้ตอบกับสภาพแวดล้อมได้อย่างสมจริง วัตถุเหล่านั้นสามารถวางบนโต๊ะ ชนกับกำแพง หรือแม้กระทั่งถูกซ่อนบางส่วนไว้หลังวัตถุในโลกจริงได้
• ประสบการณ์ผู้ใช้ที่ดีขึ้น: ด้วยการทำความเข้าใจสภาพแวดล้อม แอปพลิเคชัน WebXR สามารถมอบปฏิสัมพันธ์ที่ใช้งานง่ายและเป็นธรรมชาติมากขึ้น ตัวอย่างเช่น ผู้ใช้สามารถชี้ไปที่พื้นผิวในโลกจริงและวางวัตถุเสมือนลงบนนั้นได้โดยตรง
• การบดบัง (Occlusion): การตรวจจับเมชเป็นรากฐานสำหรับการใช้งานการบดบัง ซึ่งเป็นสิ่งสำคัญอย่างยิ่งในการสร้างประสบการณ์ AR ที่น่าเชื่อถือ
• การรับรู้เชิงพื้นที่: การทราบเค้าโครงของสภาพแวดล้อมช่วยให้สามารถสร้างแอปพลิเคชันที่ตระหนักถึงบริบทได้ ตัวอย่างเช่น แอปเพื่อการศึกษาสามารถระบุโต๊ะและแสดงข้อมูลซ้อนทับเกี่ยวกับวัตถุที่มักพบบนโต๊ะได้

ความเข้าใจสภาพแวดล้อมใน WebXR

ในขณะที่การตรวจจับเมชให้ข้อมูลทางเรขาคณิตดิบ ความเข้าใจสภาพแวดล้อมจะก้าวไปอีกขั้นโดยการติดป้ายกำกับเชิงความหมาย (semantically labeling) ให้กับส่วนต่างๆ ของฉาก ซึ่งหมายถึงการระบุพื้นผิวว่าเป็นพื้น กำแพง โต๊ะ เก้าอี้ หรือแม้แต่วัตถุเฉพาะอย่างประตูหรือหน้าต่าง ความเข้าใจสภาพแวดล้อมมักใช้อัลกอริทึมการเรียนรู้ของเครื่องเพื่อวิเคราะห์เมชและจำแนกพื้นที่ต่างๆ

ประโยชน์ของความเข้าใจสภาพแวดล้อม

• ปฏิสัมพันธ์เชิงความหมาย: ลองนึกภาพการวางต้นไม้เสมือนบนพื้นผิวที่เป็น "โต๊ะ" ตามที่ระบบระบุ ความเข้าใจสภาพแวดล้อมช่วยให้สามารถวางวัตถุเสมือนได้อย่างชาญฉลาดและตระหนักถึงบริบทมากขึ้น
• การบดบังขั้นสูง: การทราบประเภทของพื้นผิวสามารถปรับปรุงความแม่นยำของการบดบังได้ ตัวอย่างเช่น ระบบสามารถกำหนดได้อย่างแม่นยำมากขึ้นว่าวัตถุเสมือนควรถูกบดบังโดย "กำแพง" เทียบกับ "หน้าต่าง" ที่โปร่งแสงอย่างไร
• การปรับฉากอย่างชาญฉลาด: แอปพลิเคชันสามารถปรับพฤติกรรมตามสภาพแวดล้อมที่ระบุได้ เกมอาจสร้างความท้าทายตามขนาดและเค้าโครงของห้อง แอปอีคอมเมิร์ซอาจแนะนำเฟอร์นิเจอร์ที่พอดีกับขนาดห้องนั่งเล่นของผู้ใช้

การบดบัง (Occlusion) ใน WebXR: การผสมผสานโลกเสมือนและโลกจริง

การบดบังคือกระบวนการซ่อนส่วนของวัตถุเสมือนที่อยู่หลังวัตถุในโลกจริง นี่เป็นเทคนิคที่สำคัญในการสร้างภาพลวงตาว่าวัตถุเสมือนมีอยู่จริงในโลกแห่งความเป็นจริง หากไม่มีการบดบังที่เหมาะสม วัตถุเสมือนจะปรากฏลอยอยู่หน้าทุกสิ่ง ทำลายภาพลวงตาของการมีอยู่

การบดบังทำงานอย่างไร

การบดบังโดยทั่วไปอาศัยข้อมูลเมชที่สร้างขึ้นจากการตรวจจับเมช แอปพลิเคชัน WebXR สามารถกำหนดได้ว่าส่วนใดของวัตถุเสมือนถูกซ่อนอยู่หลังเมชที่ตรวจพบ และแสดงผลเฉพาะส่วนที่มองเห็นเท่านั้น ซึ่งสามารถทำได้ผ่านเทคนิคต่างๆ เช่น การทดสอบความลึก (depth testing) และ stencil buffers ใน WebGL

เทคนิคการบดบัง

• การบดบังตามความลึก (Depth-Based Occlusion): นี่เป็นวิธีที่พบบ่อยและตรงไปตรงมาที่สุด depth buffer จะเก็บระยะห่างจากกล้องไปยังแต่ละพิกเซล เมื่อแสดงผลวัตถุเสมือน จะมีการตรวจสอบ depth buffer หากพื้นผิวในโลกจริงอยู่ใกล้กล้องมากกว่าส่วนของวัตถุเสมือน ส่วนนั้นของวัตถุเสมือนจะไม่ถูกแสดงผล ทำให้เกิดภาพลวงตาของการบดบัง
• การบดบังด้วย Stencil Buffer (Stencil Buffer Occlusion): stencil buffer เป็นพื้นที่หน่วยความจำเฉพาะที่สามารถใช้เพื่อทำเครื่องหมายพิกเซล ในบริบทของการบดบัง เมชของโลกจริงสามารถแสดงผลลงใน stencil buffer จากนั้นเมื่อแสดงผลวัตถุเสมือน เฉพาะพิกเซลที่ *ไม่ได้* ถูกทำเครื่องหมายใน stencil buffer เท่านั้นที่จะถูกแสดงผล ซึ่งเป็นการซ่อนส่วนที่อยู่หลังเมชของโลกจริงอย่างมีประสิทธิภาพ
• การบดบังเชิงความหมาย (Semantic Occlusion): เทคนิคขั้นสูงนี้ผสมผสานการตรวจจับเมช ความเข้าใจสภาพแวดล้อม และการเรียนรู้ของเครื่องเพื่อให้ได้การบดบังที่แม่นยำและสมจริงยิ่งขึ้น ตัวอย่างเช่น การทราบว่าพื้นผิวเป็นหน้าต่างโปร่งแสงช่วยให้ระบบสามารถใช้ความโปร่งใสที่เหมาะสมกับวัตถุเสมือนที่ถูกบดบังได้

การนำการตรวจจับเมช ความเข้าใจสภาพแวดล้อม และการบดบังไปใช้ใน WebXR

ตอนนี้ เรามาสำรวจวิธีการนำฟีเจอร์เหล่านี้ไปใช้ในโปรเจกต์ WebXR ของคุณโดยใช้ JavaScript และไลบรารี WebXR ยอดนิยมกัน

ข้อกำหนดเบื้องต้น

• อุปกรณ์ที่รองรับ WebXR: คุณจะต้องมีอุปกรณ์ที่รองรับ WebXR พร้อมความสามารถ AR เช่น สมาร์ทโฟนหรือชุดหูฟัง AR
• เว็บเบราว์เซอร์: ใช้เว็บเบราว์เซอร์สมัยใหม่ที่รองรับ WebXR เช่น Chrome หรือ Edge
• ไลบรารี WebXR (ทางเลือก): ไลบรารีอย่าง three.js หรือ Babylon.js สามารถทำให้การพัฒนา WebXR ง่ายขึ้น
• ความรู้พื้นฐานด้านการพัฒนาเว็บ: ความคุ้นเคยกับ HTML, CSS และ JavaScript เป็นสิ่งจำเป็น

การนำไปใช้งานทีละขั้นตอน

1. เริ่มต้นเซสชัน WebXR:

   เริ่มต้นด้วยการร้องขอเซสชัน WebXR AR:

               
      navigator.xr.requestSession('immersive-ar', {
       requiredFeatures: ['dom-overlay', 'hit-test', 'mesh-detection'] // Request mesh detection feature
      }).then(session => {
       // Session started successfully
      }).catch(error => {
       console.error('Failed to start WebXR session:', error);
      });
     
               
   
                 
                   Copy
                 
               
             

2. ร้องขอการเข้าถึงเมช:

   ร้องขอการเข้าถึงข้อมูลเมชที่ตรวจพบ:

               
      session.requestReferenceSpace('local').then(referenceSpace => {
       session.updateWorldTrackingState({ planeDetectionState: { enabled: true } }); // Enable plane detection if needed
   
       session.addEventListener('frame', (event) => {
        const frame = event.frame;
        const detectedMeshes = frame.getDetectedMeshes();
   
        detectedMeshes.forEach(mesh => {
         // Process each detected mesh
         const meshPose = frame.getPose(mesh.meshSpace, referenceSpace);
         const meshGeometry = mesh.mesh.geometry; // Access the mesh geometry
   
         // Update or create a 3D object in your scene based on the mesh data
        });
       });
      });
     
               
   
                 
                   Copy
                 
               
             

3. ประมวลผลข้อมูลเมช:

   อ็อบเจกต์ meshGeometry ประกอบด้วยจุดยอด (vertices) ดัชนี (indices) และเวกเตอร์แนวฉาก (normals) ของเมชที่ตรวจพบ คุณสามารถใช้ข้อมูลนี้เพื่อสร้างแบบจำลอง 3 มิติของสภาพแวดล้อมใน scene graph ของคุณ (เช่น ใช้ three.js หรือ Babylon.js)

   ตัวอย่างการใช้ Three.js:

               
      // Create a Three.js geometry from the mesh data
      const geometry = new THREE.BufferGeometry();
      geometry.setAttribute('position', new THREE.BufferAttribute(meshGeometry.vertices, 3));
      geometry.setIndex(new THREE.BufferAttribute(meshGeometry.indices, 1));
      geometry.computeVertexNormals();
   
      // Create a Three.js material
      const material = new THREE.MeshStandardMaterial({ color: 0x808080, wireframe: false });
   
      // Create a Three.js mesh
      const meshObject = new THREE.Mesh(geometry, material);
      meshObject.matrixAutoUpdate = false;
      meshObject.matrix.fromArray(meshPose.transform.matrix);
   
      // Add the mesh to your scene
      scene.add(meshObject);
     
               
   
                 
                   Copy
                 
               
             

4. ใช้งานการบดบัง:

   ในการใช้งานการบดบัง คุณสามารถใช้เทคนิค depth buffer หรือ stencil buffer ที่อธิบายไว้ก่อนหน้านี้ได้

   ตัวอย่างการใช้การบดบังตามความลึก (ใน Three.js):

               
      // Set the depthWrite property of the material to false for the virtual objects that should be occluded
      virtualObject.material.depthWrite = false;
     
               
   
                 
                   Copy
                 
               
             

5. ความเข้าใจสภาพแวดล้อม (ทางเลือก):

   API สำหรับความเข้าใจสภาพแวดล้อมยังอยู่ในระหว่างการพัฒนาและอาจแตกต่างกันไปขึ้นอยู่กับแพลตฟอร์มและอุปกรณ์ บางแพลตฟอร์มมี API สำหรับการสอบถามป้ายกำกับเชิงความหมายสำหรับพื้นที่ต่างๆ ของฉาก หากมี ให้ใช้ API เหล่านี้เพื่อเพิ่มความเข้าใจสภาพแวดล้อมของแอปพลิเคชันของคุณ

   ตัวอย่าง (ขึ้นอยู่กับแพลตฟอร์ม โปรดตรวจสอบเอกสารของอุปกรณ์)

               
      // This is conceptual and requires device specific API calls
      const environmentData = frame.getEnvironmentData();
      environmentData.surfaces.forEach(surface => {
       if (surface.type === 'table') {
        // Place virtual objects on the table
       }
      });
     
               
   
                 
                   Copy
                 
               
             

ตัวอย่างโค้ด: เฟรมเวิร์ก WebXR

Three.js

Three.js เป็นไลบรารี 3D JavaScript ยอดนิยมที่ช่วยให้การพัฒนา WebGL ง่ายขึ้น มีวิธีที่สะดวกในการสร้างและจัดการอ็อบเจกต์และฉาก 3 มิติ

            
 // Basic Three.js scene setup
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);

 // Add a light to the scene
 const light = new THREE.AmbientLight(0xffffff);
 scene.add(light);

 // Animation loop
 function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
 }
 animate();

 // ... (Mesh detection and occlusion code as shown previously) ...

            

              
                Copy
              
            
          

Babylon.js

Babylon.js เป็นอีกหนึ่งเอ็นจิ้น 3D JavaScript ที่ทรงพลังซึ่งเหมาะอย่างยิ่งสำหรับการพัฒนา WebXR มีฟีเจอร์หลากหลาย รวมถึงการจัดการฉาก ฟิสิกส์ และความสามารถในการเรนเดอร์ขั้นสูง

            
 // Basic Babylon.js scene setup
 const engine = new BABYLON.Engine(canvas, true);
 const scene = new BABYLON.Scene(engine);
 const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
 camera.attachControl(canvas, true);
 const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

 engine.runRenderLoop(() => {
  scene.render();
 });

 // ... (Mesh detection and occlusion code using Babylon.js specific methods) ...

            

              
                Copy
              
            
          

ข้อควรพิจารณาและแนวทางปฏิบัติที่ดีที่สุด

• การเพิ่มประสิทธิภาพ: การตรวจจับเมชอาจใช้ทรัพยากรในการประมวลผลสูง ควรปรับโค้ดของคุณเพื่อลดผลกระทบต่อประสิทธิภาพ ลดจำนวนจุดยอดในเมช ใช้เทคนิคการเรนเดอร์ที่มีประสิทธิภาพ และหลีกเลี่ยงการคำนวณที่ไม่จำเป็น
• ความแม่นยำและเสถียรภาพ: ความแม่นยำในการตรวจจับเมชอาจแตกต่างกันไปขึ้นอยู่กับอุปกรณ์ สภาพแวดล้อม และคุณภาพการติดตาม ควรมีการจัดการข้อผิดพลาดและกลไกสำรองเพื่อรับมือกับสถานการณ์ที่การตรวจจับเมชไม่น่าเชื่อถือ
• ความเป็นส่วนตัวของผู้ใช้: คำนึงถึงความเป็นส่วนตัวของผู้ใช้เมื่อรวบรวมและประมวลผลข้อมูลสภาพแวดล้อม ขอความยินยอมจากผู้ใช้และให้ข้อมูลที่ชัดเจนเกี่ยวกับวิธีการใช้ข้อมูล
• การเข้าถึง: ตรวจสอบให้แน่ใจว่าแอปพลิเคชัน WebXR ของคุณสามารถเข้าถึงได้โดยผู้ใช้ที่มีความพิการ จัดหาวิธีการป้อนข้อมูลทางเลือก คำบรรยาย และคำอธิบายเสียง
• ความเข้ากันได้ข้ามแพลตฟอร์ม: ทดสอบแอปพลิเคชันของคุณบนอุปกรณ์และเบราว์เซอร์ต่างๆ เพื่อให้แน่ใจว่าสามารถทำงานร่วมกันได้ข้ามแพลตฟอร์ม ใช้การตรวจจับฟีเจอร์เพื่อปรับโค้ดของคุณให้เข้ากับความสามารถของอุปกรณ์

การประยุกต์ใช้การตรวจจับเมช WebXR ในโลกแห่งความเป็นจริง

การตรวจจับเมช WebXR ความเข้าใจสภาพแวดล้อม และการบดบังกำลังเปิดโอกาสที่น่าตื่นเต้นมากมายสำหรับประสบการณ์ที่สมจริงในอุตสาหกรรมต่างๆ:

• ค้าปลีกและอีคอมเมิร์ซ:
  • การวางเฟอร์นิเจอร์เสมือนจริง: ให้ผู้ใช้สามารถวางเฟอร์นิเจอร์เสมือนจริงในบ้านของตนเพื่อดูว่ามีลักษณะอย่างไรก่อนตัดสินใจซื้อ แอป Place ของ IKEA เป็นตัวอย่างที่ชัดเจน
  • การลองสินค้าเสมือนจริง: ช่วยให้ผู้ใช้สามารถลองเสื้อผ้า เครื่องประดับ หรือเครื่องสำอางเสมือนจริงโดยใช้กล้องของอุปกรณ์
• เกมและความบันเทิง:
  • เกม AR: สร้างเกมความเป็นจริงเสริมที่ผสมผสานองค์ประกอบเสมือนเข้ากับโลกแห่งความเป็นจริงได้อย่างลงตัว ลองนึกภาพเกมที่สิ่งมีชีวิตเสมือนซ่อนอยู่หลังเฟอร์นิเจอร์ในโลกจริง
  • การเล่าเรื่องที่สมจริง: เล่าเรื่องราวที่เกิดขึ้นในสภาพแวดล้อมของผู้ใช้เอง สร้างประสบการณ์ที่มีส่วนร่วมและเป็นส่วนตัวมากขึ้น
• การศึกษาและการฝึกอบรม:
  • การเรียนรู้เชิงโต้ตอบ: สร้างประสบการณ์การเรียนรู้เชิงโต้ตอบที่ซ้อนทับข้อมูลลงบนวัตถุในโลกจริง ตัวอย่างเช่น แอปสามารถระบุส่วนต่างๆ ของเครื่องยนต์และให้คำอธิบายโดยละเอียดได้
  • การฝึกอบรมทางไกล: ช่วยให้ผู้เชี่ยวชาญทางไกลสามารถแนะนำผู้ใช้ผ่านงานที่ซับซ้อนโดยการซ้อนทับคำแนะนำและคำอธิบายประกอบลงบนมุมมองของผู้ใช้ในโลกแห่งความเป็นจริง
• สถาปัตยกรรมและการออกแบบ:
  • การสร้างต้นแบบเสมือนจริง: ช่วยให้สถาปนิกและนักออกแบบสามารถเห็นภาพการออกแบบของตนในโลกแห่งความเป็นจริง ทำให้สามารถตัดสินใจได้อย่างมีข้อมูลมากขึ้น
  • การวางแผนพื้นที่: ช่วยผู้ใช้วางแผนเค้าโครงบ้านหรือสำนักงานโดยการวางเฟอร์นิเจอร์และวัตถุเสมือนจริงในพื้นที่
• การผลิตและวิศวกรรม:
  • การประกอบโดยใช้ AR ช่วย: แนะนำคนงานผ่านกระบวนการประกอบที่ซับซ้อนโดยการซ้อนทับคำแนะนำและสัญลักษณ์ภาพลงบนสายการผลิตในโลกจริง
  • การบำรุงรักษาทางไกล: ช่วยให้ผู้เชี่ยวชาญทางไกลสามารถช่วยเหลือช่างเทคนิคในงานบำรุงรักษาและซ่อมแซมโดยให้คำแนะนำและคำอธิบายประกอบแบบเรียลไทม์

อนาคตของ WebXR และความเข้าใจสภาพแวดล้อม

เทคโนโลยี WebXR และความเข้าใจสภาพแวดล้อมกำลังพัฒนาอย่างรวดเร็ว ในอนาคต เราคาดว่าจะได้เห็น:

• ความแม่นยำและความทนทานที่ดีขึ้น: ความก้าวหน้าในเทคโนโลยีเซ็นเซอร์และการเรียนรู้ของเครื่องจะนำไปสู่การตรวจจับเมชและความเข้าใจสภาพแวดล้อมที่แม่นยำและทนทานยิ่งขึ้น
• การแบ่งส่วนเชิงความหมายแบบเรียลไทม์: การแบ่งส่วนเชิงความหมายแบบเรียลไทม์จะช่วยให้เข้าใจสภาพแวดล้อมได้ละเอียดยิ่งขึ้น ทำให้แอปพลิเคชันสามารถระบุและโต้ตอบกับวัตถุและพื้นผิวเฉพาะได้อย่างแม่นยำมากขึ้น
• ความเข้าใจฉากที่ขับเคลื่อนด้วย AI: ปัญญาประดิษฐ์จะมีบทบาทสำคัญในการทำความเข้าใจบริบทและความหมายของฉาก ทำให้เกิดประสบการณ์ AR ที่ชาญฉลาดและปรับเปลี่ยนได้มากขึ้น
• การบูรณาการกับบริการคลาวด์: บริการคลาวด์จะให้การเข้าถึงโมเดลการเรียนรู้ของเครื่องที่ฝึกไว้ล่วงหน้าและข้อมูลสำหรับความเข้าใจสภาพแวดล้อม ทำให้นักพัฒนาสามารถสร้างแอปพลิเคชัน AR ที่ซับซ้อนได้ง่ายขึ้น
• API ที่เป็นมาตรฐาน: การกำหนดมาตรฐานของ WebXR API จะอำนวยความสะดวกในการพัฒนาข้ามแพลตฟอร์มและรับประกันว่าประสบการณ์ AR จะสามารถเข้าถึงได้ในวงกว้างขึ้น

สรุป

การตรวจจับเมช WebXR ความเข้าใจสภาพแวดล้อม และการบดบังเป็นสิ่งจำเป็นสำหรับการสร้างประสบการณ์ความเป็นจริงเสริมที่น่าสนใจและสมจริง ด้วยการทำความเข้าใจสภาพแวดล้อมของผู้ใช้ แอปพลิเคชัน WebXR สามารถมอบปฏิสัมพันธ์ที่ใช้งานง่ายขึ้น ปรับปรุงการมีส่วนร่วมของผู้ใช้ และปลดล็อกความเป็นไปได้ที่น่าตื่นเต้นมากมายในอุตสาหกรรมต่างๆ ในขณะที่เทคโนโลยีเหล่านี้ยังคงพัฒนาต่อไป เราคาดว่าจะได้เห็นแอปพลิเคชัน AR ที่สร้างสรรค์และสมจริงยิ่งขึ้นซึ่งผสมผสานโลกเสมือนและโลกแห่งความเป็นจริงได้อย่างลงตัว นำเทคโนโลยีเหล่านี้มาใช้และเริ่มสร้างอนาคตของประสบการณ์เว็ปที่สมจริงได้แล้ววันนี้!